<template>
<view class="datum-pdf fboxCol Ycenter">
  <view class="space-block"></view>
  <view class="datum-list fboxWrap">
    <view class="w690 title font28 fwb">资料文件</view>
    <block v-for="(item,index) in innerData.pdfToImgUrlNum" :key="index">
      <view class="datum-pic">
        <view class="page font20 color-fff">{{index+1}}/{{innerData.pdfToImgUrlNum}}</view>
        <image class="img" :src="innerData.previewUrl || 'https://ebc-prod.cdn.benwunet.com/Preview.png'" mode="widthFix"></image>
        <view class="layer fboxRow Ycenter Xcenter">
         <!-- <view class="btn-datum fboxRow Ycenter Xcenter font28 color-00C15D bg-fff" v-if="innerData.isBuy" @tap="lookTap">立即查阅</view>
          <view class="btn-datum fboxRow Ycenter Xcenter font28 color-00C15D bg-fff" v-else-if="index == 0 && innerData.previewUrl" @tap="previewImage">预览</view>
          <view class="btn-datum fboxRow Ycenter Xcenter font28 color-FF9645 bg-fff" v-else-if="innerData.isSpecialBuy || innerData.price == 0 || (innerData.valuation == 1 && innerData.vipPrice == 0 && isVip)" @tap="previewAll">立即查阅</view>
          <view class="btn-datum fboxRow Ycenter Xcenter font28 color-FF9645 bg-fff" v-else @tap="previewAll">查阅全部</view> -->
			<view class="btn-datum fboxRow Ycenter Xcenter font28 color-00C15D bg-fff" v-if="innerData.isBuy" @tap="lookTap">立即查阅</view>
			<view class="btn-datum fboxRow Ycenter Xcenter font28 color-FF9645 bg-fff" v-else-if="innerData.isSpecialBuy || innerData.price == 0 || (innerData.valuation == 1 && innerData.vipPrice == 0 && isVip)" @tap="previewAll">立即订阅</view>
			<view class="btn-datum fboxRow Ycenter Xcenter font28 color-00C15D bg-fff" v-else-if="index == 0 && innerData.previewUrl" @tap="previewImage">预览</view>
			<view class="btn-datum fboxRow Ycenter Xcenter font28 color-FF9645 bg-fff" v-else @tap="previewAll">立即订阅</view>
        </view>
      </view>
    </block>
	<!-- 自定义预览 -->
	<u-overlay :show="isPreview"  @click="isPreview = false">
		<view class="preview-box fboxWrap Ycenter Xcenter">
			<view class="close fboxRow Ycenter Xcenter" @tap="isPreview = false"><u-icon name="close" color="#fff"></u-icon></view>
			<movable-area>
			    <movable-view :style="{height: picH}" direction="all" scale-value="1" scale-min="0.6" scale="true" scale-max="4">
					<image class="pic" @tap.stop :src="previewUrl" @load="imgLoad" mode="widthFix"></image>
					<!-- <scroll-view scroll-y="true" class="preview-box">
						<image class="pic" @tap.stop :src="previewUrl" mode="widthFix"></image>
					</scroll-view> -->
			    </movable-view>
			  </movable-area>
		</view>
	</u-overlay>
  </view>
</view>
</template>

<script>
	import { throttle } from '@/static/js/common.js';
	import {onlinePreview} from '@/api/index.js'
	export default {
		props: {
			layoutType: {
				type: [Number, String],
				default: 0 // 0 收藏 | 2课堂 | 3 已购课程
			},
			// 当前项数据
			innerData: {
				type: Object,
				default: () => {
					return {
						"collectNum": 0,
						"duration": "",
						"format": "",
						"gmtCreate": "",
						"grade": "",
						"gradeTags": [],
						"img": "",
						"isBuy": false,
						"isCollected": false,
						"isPreview": 0,
						"materialsId": "",
						"materialsName": "",
						"materialsTagId": "",
						"pdfToImgUrl": "",
						"previewUrl": "",
						"price": 0,
						"remark": "",
						"tags": [],
						"url": "",
						"valuation": "",
						"viewNum": 0,
						"vipPrice": 0
					}
				}
			}
		},
		data() {
			return {
				isVip: false,
				isPreview: false,
				previewUrl: '',
				picH: '100px'
			}
		},
		methods: {
			// 预览图片
			previewImage() {
			  const {previewUrl} = this.innerData
			  const reg = /\.(png|jpg|gif|jpeg|webp)$/;
			  if(reg.test(previewUrl)){
				uni.previewImage({
				  current: previewUrl, // 当前显示图片的http链接
				  urls: [previewUrl], // 需要预览的图片http链接列表
				  showmenu: false
				})
				// this.isPreview = true
				// this.previewUrl = previewUrl
			  }else{
				uni.showToast({
				  title: '不能预览',
				  icon: 'none'
				})
			  }
			},
			// 已购买查看
			lookTap: throttle(function(index) {
				// onlinePreview({
				// 	"fileName": this.innerData.materialsName+'.pdf',
				// 	"fileURL": this.innerData.url
				// }).then(res=>{
				// 	console.log(res.data.previewUrl)
				// 	// uni.previewImage({
				// 	//   current: 0, // 当前显示图片的http链接
				// 	//   urls: [res.data.previewUrl], // 需要预览的图片http链接列表
				// 	//   showmenu: false
				// 	// })
				// 	// uni.getImageInfo({
				// 	// 	src: res.data.previewUrl,
				// 	// 	success: (pRes)=>{
				// 	// 		console.log(pRes)
				// 	// 		this.picH = pRes.height +'rpx'
				// 	// 		this.isPreview = true
				// 	// 		this.previewUrl = res.data.previewUrl
				// 	// 	}
				// 	// })
				// 	this.isPreview = true
				// 	this.previewUrl = res.data.previewUrl
				// })
				// uni.openDocument({
				// 	showMenu: true,
				// 	fileType: 'pdf',
				// 	filePath: this.innerData.url ,
				// 	success: function (res) {
				// 	  console.log('打开文档成功')
				// 	}
				//   })
				this.$pageTo('/bks/index/webview?url='+this.innerData.url+'&name='+this.innerData.materialsName )
			}, 1000),
			imgLoad(e){
				const query = uni.createSelectorQuery().in(this);
				query.select(".pic")//这里是类名称或者id名称（#id）
				  .boundingClientRect((data) => {
					this.picH = data.height +'px'
				  }).exec();
			},
			previewAll(){
				this.$emit('buy')
			},
		}
	}
</script>

<style lang="scss" scoped>
.datum-list{padding: 30rpx 0 30rpx 30rpx;}
.datum-pic{position: relative;margin: 0 30rpx 30rpx 0; width: 330rpx; height: 480rpx;}
.datum-pic .img{width: 330rpx; height: 480rpx;overflow: hidden;filter:blur(4rpx);}
.datum-pic .layer{position: absolute;left: 0;top: 0; width: 330rpx; height: 480rpx;background-color:rgba(245, 245, 250, .4);z-index: 2;}
.datum-pic .btn-datum{width: 207rpx;height: 68rpx;box-shadow: 0 0 2rpx 0 rgba(0, 0, 0, 0.2);border-radius: 4rpx;}
.page{position: absolute;left: 0;top: 0;padding: 6rpx 10rpx;background-color: rgba(0, 0, 0, 0.2); z-index: 3;}

.datum-intr{padding: 30rpx 0;}
.title{margin-bottom: 20rpx;}
.preview-box{height: calc(100vh);}
.preview-box .close{position: fixed;top: 130rpx;right: 40rpx;z-index: 1001;width: 40rpx;height: 40rpx;background-color: rgba(0,0,0,.5);border-radius: 50%;}
.preview-box .pic{width: 750rpx;overflow-y: auto;}
// .pic-inner{height: calc(90vh);overflow-y: auto;}
.preview-box {
		&>movable-area {	
			height: calc(100vh);
			width: 100%;
			position:fixed;
			overflow: hidden;
			left: 0;
			z-index: 1000;
			movable-view{
				display: flex;
				justify-content: center;
				padding: 40rpx 0;
				height: 100%;
				width: 100%;
				.pic {width: 750rpx;}
			}
		}
	}
</style>